<?php
    session_start();
    if(! isset($_SESSION['username'])) {
        header('Location:index.html');
    }

    ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .div{
            position: relative;
            text-align: center;
            padding-left: 500px;
        }
        .font{
            font-size: 16px;
            font-weight: bold;;
        }
        form{
            font-weight:bold;
        }
 #msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: #f05f55;
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 52px;
}
#send,.xn{
  width: 89px;
  outline: none;
  border: none;
  background: rgb(0, 132, 255);
  height: 29px;
  cursor: pointer;
  color: #fff;
  border-radius: 20px;
  font: bold 12px '宋体';
    line-height: normal;
  transition: all 0.5s;
  margin-top: 6px;
  display: inline-block;
  line-height: 2.5;
}
.xn{
  width: 89px;
  outline: none;
  border: none;
  background: rgb(0, 139, 25);
  height: 29px;
  cursor: pointer;
  color: #fff;
  border-radius: 20px;
  font: bold 12px '宋体';
    line-height: normal;
  transition: all 0.5s;
  margin-top: 6px;
  display: inline-block;
  line-height: 2.5;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  margin-left: -50px;
}
background: repeating-linear-gradient(
            -45deg,
            #e8544d,
            #e8544d 1px,
            #fff 2px,
            #fff 2px,
            #75adf8 2px,
            #75adf8 3px,
            #fff 3px,
            #fff 4px
        );
     
       
      
        
/*        
            background: url(./663.png)no-repeat; */
        }
        marquee {
            background-color: #fff;
        }
.flex {
  display:flex;
  justify-content:center;
  align-items:center;
margin-bottom: 16px;
 }
 .demo {
  width:100%;
  height:22.85px;
  position:relative;
  /* background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8); */
  color:#000;
  opacity: 0.6;
  font-size:13px;
 }
 .circle {
  width:100px;
  height:100px;
  border-radius:50%;
  position:relative;
  background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
  color:#fff;
 }
 .circle:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:-6px;
  border:5px solid transparent;
  border-top:5px solid #f64f59;
  border-radius:50%;
  transform:rotate(45deg);
  animation:circleRotate 3s linear infinite;
 }
 @keyframes circleRotate {
  0% {
   transform:rotate(0);
  }
  100% {
   transform:rotate(360deg);
  }
    </style>
</head>
<body style="text-align: center">
<?php include ('menu.php');?>
<?php include('conn.php');
//1. 链接数据库
header("content-type:text/html;charset=utf8");
include('conn.php');
$id=$_GET['id'];
//2.执行sql
$sql_select = "select * from user where nicheng='".
$_SESSION['nicheng']."'";

$stmt = mysqli_query($conn,$sql_select);
//    var_dump($stmt);
//    die();
$user = mysqli_fetch_assoc($stmt); // 解析数据

?>
<div class="demo flex"><marquee behavior="" 
direction="">游戏名要与游戏里的一致，更改资料时不修改的信息按原样不动</marquee></div>
 <script>
        function alert(e){
            $("body").append("<div id='msg'><span>"+e+"</span></div>");
            clearmsg();
        }
        function clearmsg(){
            var t = setTimeout(function(){
                $("#msg").remove();
            },2000)
        };
        
       </script>
 <script type="text/javascript">
 /* 
功能:为矩形元素附上一层运动的边线
原理:  核心:css clip rect   web animation 负责动态化
注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理
    如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译
*/
 
 
/* 使用
_initDanceBorder(el,option);
*/
 
//纯 JS实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框
 
/* 
测试用配置
*/
const options = [{}, {
 duration: 12000,
 double: false
}, {
 duration: 4000,
 'border-color': 'red',
 'easing': 'ease-in-out'
}, {
 'margin': -15,
 'borderWidth': 10,
 'border-image': "url(./wx.png) 10 10",
 
}, {
 'borderWidth': 2
}]
 
 
//使用方法
for (let i = 0; i < document.getElementsByClassName('demo').length; i++) {
 _initDanceBorder(document.getElementsByClassName('demo')[i], options[i]);
}
 
/***************************      主 体 代 码       ********************************/
 
//传入dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
    //默认设置  尺寸单位均为px
    let _options = {
        //边框模糊度  
        blur: 1,
        //距依赖元素距离 
        margin: -5,
        //边框宽度  
        borderWidth: 4,
        //转一周时长  
        duration: 8000,
        //运动效果  default:匀速
        easing: 'linear',
        //是否两条运动线  默认两条
        double: true,
        //渐变色边框 优先级高  若使用渐变色或图片背景  请正确传入该值  否则边框不会显示
        'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
        //边框色   border-image 优先级低
        'border-color': 'green'
    }
 
    //存在正常色 不存在渐变色   渐变色赋值为空
    options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none')
    //设置拷贝
    Object.keys(_options).forEach(key => {
     options[key] && (_options[key] = options[key]);
        //double 的特殊判断
        if (key == 'double' && typeof options[key] == 'boolean') {
         _options[key] = options[key]
        }
    })
 
    //元素基本属性
    const styleObj = {
     'content': '',
     'z-index': -1,
     'margin': `${_options.margin}px`,
     'border': `${_options.borderWidth}px solid`,
     'border-color': _options['border-color'],
     'border-image': _options['border-image'],
     'filter': `blur(${_options.blur}px)`,
     'position': 'absolute',
     'top': 0,
     'bottom': 0,
     'left': 0,
     'right': 0
    }
 
    const pW = el.style.width || el.offsetWidth;
    const pH = el.style.height || el.offsetHeight;
 
    const fullWidth = pW + _options.margin * -2;
    const fullHeight = pH + _options.margin * -2;
 
    //四边切割数组
    const rectArray = [
    `rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
    `rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
    `rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
    `rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)`
    ]
 
    const clipAnimate = [{
     clip: rectArray[0]
    },
    {
     clip: rectArray[1],
     offset: 0.25
    },
    {
     clip: rectArray[2],
     offset: 0.5
    },
    {
     clip: rectArray[3],
     offset: 0.75
    },
    {
     clip: rectArray[0],
     offset: 1
    }
    ];
 
    //由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
    const clipAnimateTwo = [{
     clip: rectArray[2]
    },
    {
     clip: rectArray[3],
     offset: 0.25
    },
    {
     clip: rectArray[0],
     offset: 0.5
    },
    {
     clip: rectArray[1],
     offset: 0.75
    },
    {
     clip: rectArray[2],
     offset: 1
    }
    ];
 
    const animateOption = {
     duration: _options.duration,
     iterations: Infinity,
     easing: _options.easing
    };
 
    const section = initBaseEl();
 
    //Web Animations  实现keyframes动画
    section.animate(clipAnimate, animateOption);
 
    //是否两条运动线
    if (_options.double) {
     let sectionTwo = initBaseEl();
     sectionTwo.animate(clipAnimateTwo, animateOption);
    }
 
    //构造元素
    function initBaseEl() {
     const section = document.createElement("section");
        //style属性赋值
        Object.keys(styleObj).forEach(key => {
         section.style[key] = styleObj[key]
        })
 
        el.appendChild(section);
 
        return section;
    }
 
 
    //页面尺寸改变  修改
}
</script>
<h3>修改信息</h3>

当前游戏名: &nbsp&nbsp&nbsp &nbsp&nbsp<?php echo  $user['nicheng'];?>
<br>
当前账号: &nbsp&nbsp&nbsp &nbsp&nbsp<?php echo $user['username'];?>
<br>
当前密码: &nbsp&nbsp&nbsp &nbsp&nbsp<?php echo $user['password']?>
<br>
当前签名: &nbsp&nbsp&nbsp &nbsp&nbsp<?php echo $user['qm']?>

<form  method="post" enctype="multipart/form-data">
<?php if($_SESSION['qm']==''){?>  

			<h4>请先点击资料输入签名才能进行更改</h4>
                       <a href= 'addcourse.php'class="xn">确定</a>

			<?}else{?>
<span id=ki>
             更改的签名<input name="qm" class="form-control"id="xq"  type="text"
value="<?php echo $user['qm'];?>"> 
<br>
           <form  method="post"
			enctype="multipart/form-data">
              更改的密码<input name="password" 
class="form-control" id="xm"type="text"value="<?php echo $user['password'];?>">
<br>
更改的游戏名<input name="nicheng" 
class="form-control" id="xm"type="text"
value="<?php echo $user['nicheng'];?>"> 
      <br>
<?php
if($_SERVER["REQUEST_METHOD"]=="POST") {
include('conn.php');
$qm=$_POST['qm'];
   $nicheng=$_POST['nicheng'];

   $password=$_POST['password'];
   $sql = "select * from user where qm = '{$_POST['qm']}' and nicheng='{$_POST['nicheng']}' and password= '{$_POST['password']}' ";
          
   $rs = mysqli_query($link, $sql); //执行sql查询
   $row = mysqli_fetch_assoc($rs);

   if ($row) { // 用户存在；
       if ($_POST['qm'] == $row['qm'] && $_POST['nicheng'] == $row['nicheng'] && $_POST['password'] == $row['password']) {
 
                 
                  echo  "<script>alert('未做任何更改！');history.go(-1);</script>";
       }
}else{
        $sql = "UPDATE `user` SET `qm` = '$qm' ,`nicheng` = '$nicheng',`password` = '$password' WHERE `id` = ".$_SESSION['id'];
        echo  $sql;
        $rw = mysqli_query($conn, $sql);
        if ($rw ) {
        $_SESSION['qm'] = $qm; 
        $_SESSION['nicheng'] = $nicheng; 
    
        $_SESSION['password'] = $password; 
     
          
       echo "<script>alert('修改成功，请重新登陆');</script>";
        echo "<script>window.location.href='/index.html'</script>";
        } else {
         echo "<script>alert('修改失败');</script>";
         
        }
    }
}


?>
             </form>  
             
              <br>
               <a href= 'addcourse.php'class="xn">返回</a> &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <input type="submit"  name="
submit" id="send" value="保存">
<br>
<br>
              </span>
</form>  
                <?}?>

              

<script>
$('#ki1').slideUp(0)
</script>



</body>
</html>